<!--
 * @Date: 2021-11-29 09:58:06
 * @LastEditors: ZN
 * @LastEditTime: 2023-04-27 16:48:38
-->
<template>
  <div ref="chartDom" class="chart"></div>
</template>

<script setup lang="ts">
import { shallowRef, onMounted, watch, nextTick } from "vue";
import * as echarts from "echarts";
import type { ECharts, EChartsOption } from "echarts";
import { merge } from "lodash";

const props = defineProps<{
  options: any;
  notMerge?: boolean;
}>();

const chartDom = shallowRef<null | HTMLElement>(null);
const chart = shallowRef<null | ECharts>(null);

onMounted(() => {
  chart.value = echarts.init(chartDom.value as HTMLElement);
  nextTick(() => {
    initChart();
  });
});

function initChart() {
  const options: EChartsOption = {};
  (chart.value as ECharts).setOption(merge(options, props.options));
}

watch(
  () => props.options,
  (val) => {
    (chart.value as ECharts).setOption(val, { notMerge: !!props.notMerge });
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;
}

.tooltip {
  background: url(../../assets/images/common/chart/tooltip-bg-x2.png) no-repeat
    center center;
  background-size: 100% 100%;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  color: #e6f7ff !important;
  font-size: 24px !important;
  line-height: 32px !important;
  font-weight: 400 !important;
  font-family: "AlibabaPuHuiTiR" !important;
  display: none;
  padding: 19px 24px !important;

  span {
    display: inline-block;
    width: 145px;
    text-align: right;
  }
}
</style>
